<template>
	<!-- 时间线模式 -->
	<div class="timeline-wrapper">
		<div class="radio">
			排序：
			<el-radio-group v-model="reverse">
				<el-radio :label="true">倒序</el-radio>
				<el-radio :label="false">正序</el-radio>
			</el-radio-group>
		</div>
		<el-timeline
			class="timeline-list"
			:reverse="reverse"
			v-if="timelineData.length"
		>
			<el-timeline-item
				class="timeline-item"
				v-for="(item, index) in timelineData"
				:key="index"
				:timestamp="item.uploadDate"
				color="#409EFF"
				placement="top"
			>
				<ul class="file-list">
					<li
						class="file-item"
						v-for="(file, timelineIndex) in item.timelineList"
						:key="`${index}-${timelineIndex}`"
						:style="`width: ${gridSize + 40}px; `"
						@click="
							$file.handleFileNameClick(file, timelineIndex, item.timelineList)
						"
						@contextmenu.prevent="
							handleContextMenu(file, timelineIndex, $event)
						"
					>
						<video
							:style="`height:${gridSize}px; width:${gridSize}px`"
							v-if="$file.isVideoFile(file)"
							:src="$file.setFileImg(file)"
						></video>
						<el-image
							class="file-img"
							:src="$file.setFileImg(file)"
							:style="`width: ${gridSize}px; height: ${gridSize}px;`"
							fit="cover"
							v-else
						/>
						<div
							class="file-name"
							v-html="$file.getFileNameComplete(file, true)"
						></div>
						<i
							class="file-operate el-icon-more"
							:class="`operate-more-${index}`"
							v-if="screenWidth <= 768"
							@click.stop="handleClickMore(file, $event)"
						></i>
						<div
							class="file-checked-wrapper"
							:class="{ checked: file.checked }"
							v-show="isBatchOperation"
							@click.stop.self="file.checked = !file.checked"
						>
							<el-checkbox
								class="file-checked"
								v-model="file.checked"
								@click.stop="file.checked = !file.checked"
							></el-checkbox>
						</div>
					</li>
				</ul>
			</el-timeline-item>
		</el-timeline>
	</div>
</template>

<script>
export default {
	name: 'FileTimeLine',
	props: {
		// 文件列表
		fileList: {
			required: true,
			type: Array
		}
	},
	data() {
		return {
			reverse: true
		}
	},
	computed: {
		// 按年-月-日分组排序
		timelineData() {
			let res = []
			// 去重，获取返回的所有日期年-月-日
			let uploadTimeSet = new Set(
				this.fileList.map((item) => item.updateTime.split(' ')[0])
			)
			let uploadDate = [...uploadTimeSet]
			// 分组
			uploadDate.forEach((element) => {
				res.push({
					uploadDate: element,
					// 过滤
					timelineList: this.fileList.filter(
						(item) => item.updateTime.split(' ')[0] === element
					)
				})
			})
			return res
		},
		// 图标大小
		gridSize() {
			return this.$store.state.fileList.gridSize
		},
		// 是否批量操作
		isBatchOperation() {
			return this.$store.state.fileList.isBatchOperation
		},
		// 批量操作模式 - 被选中的文件
		selectedFileList() {
			return this.fileList.filter((item) => item.checked)
		},
		// 屏幕宽度
		screenWidth() {
			return this.$store.state.common.screenWidth
		}
	},
	watch: {
		// 批量操作模式 - 监听被选中的文件
		selectedFileList(newValue) {
			this.$store.commit('changeSelectedFiles', newValue)
			this.$store.commit('changeIsBatchOperation', newValue.length !== 0)
		}
	},
	methods: {
		/**
		 * 文件鼠标右键事件
		 * @param {object} item 文件信息
		 * @param {number} index 文件索引
		 * @param {object} event 鼠标事件信息
		 */
		handleContextMenu(item, index, event) {
			// 阻止右键事件冒泡
			event.cancelBubble = true
			// xs 以上的屏幕
			if (this.screenWidth > 768) {
				this.selectedFile = item
				if (!this.isBatchOperation) {
					event.preventDefault()
					this.$openBox
						.contextMenu({
							selectedFile: item,
							domEvent: event
						})
						.then((res) => {
							this.selectedFile = {}
							if (res === 'confirm') {
								// 刷新文件列表
								this.$emit('getTableDataByType')
								// 刷新存储容量
								this.$store.dispatch('showStorage')
							}
						})
				}
			}
		}
	}
}
</script>

<style lang="stylus" scoped>
@import '~_a/styles/varibles.styl';
@import '~_a/styles/mixins.styl';

.timeline-wrapper {
  margin-top: 20px;
  height: calc(100vh - 215px);
  overflow-y: auto;
  setScrollbar(6px, transparent, #C0C4CC);

  .timeline-list {
    margin-top: 10px;

    .timeline-item {
      .file-list {
        display: flex;
        flex-wrap: wrap;
        list-style: none;

        .file-item {
          margin: 0 16px 16px 0;
          padding: 8px;
          text-align: center;
          cursor: pointer;

          &:hover {
            background: $tabBackColor;

            .file-name {
              font-weight: 550;
            }
          }

          .file-name {
            margin-top: 8px;
            height: 44px;
            line-height: 22px;
            font-size: 12px;
            word-break: break-all;
            setEllipsis(2);
            >>> .keyword {
              color: $Danger;
            }
          }
        }
      }
    }
  }
}
</style>
